/**
 * @class Spark.ViewComponent
 * @extends Spark.Component
 * <p>可视化的组件,可改变尺寸，具有focus,blur,mouseover,mouseout事件.
 * @author njq.niu@hand-china.com
 * @constructor
 * @param {Object} config 配置对象. 
 */
$S.ViewComponent = Ext.extend($S.Component,{    
    disabledCss:'s_dbd',
    isFocused : false,
    constructor: function(config) {
        $S.ViewComponent.superclass.constructor.call(this, config);
        if(this.hidden == true){
            this.setVisible(false)
        }
    },
    initConfig : function(config){
        config.disabled = config.disabled || false;
        $S.ViewComponent.superclass.initConfig.call(this, config);
    },
    initFocusElement : function(){
        this.focusEl = this.wrap;
    },
    initStatus : function(){
        this.initDisabled(this.disabled);
    },
    initComponent : function(config){
        $S.ViewComponent.superclass.initComponent.call(this,config);
        this.wrap = Ext.get(this.id);
    },
    doDisabled :function(disabled){
        if(disabled){
            this.wrap.addClass(this.disabledCss);
        }else{
            this.wrap.removeClass(this.disabledCss);
        }
    },
    initDisabled : function(disabled){
        if(this.isDisabled == disabled)return;
        this.clearInvalid();
        this.isDisabled = disabled;
        this.doDisabled(disabled);
    },
    initEvents : function(){
        this.initFocusElement();
        $S.ViewComponent.superclass.initEvents.call(this);
        this.addEvents(
        /**
         * @event focus
         * 获取焦点事件
         * @param {Component} this 当前组件.
         */
        'focus',
        /**
         * @event blur
         * 失去焦点事件
         * @param {Component} this 当前组件.
         */
        'blur',
        /**
         * @event mouseover
         * 鼠标经过组件事件.
         * @param {Component} this 当前组件.
         * @param {EventObject} e 鼠标事件对象.
         */
        'mouseover',
        /**
         * @event mouseout
         * 鼠标离开组件事件.
         * @param {Component} this 当前组件.
         * @param {EventObject} e 鼠标事件对象.
         */
        'mouseout');
    },
    processListener: function(ou){
        $S.ViewComponent.superclass.processListener.call(this,ou);
        this.processMouseOverOut(ou);
        this.processFocusBlurListener(ou);
        if(!Ext.isEmpty(this.marginWidth)||!Ext.isEmpty(this.marginHeight)) {
            Ext.EventManager[ou](window, "resize", this.windowResizeListener,this);
        }
    },
    processFocusBlurListener: function(ou){
        this.focusEl[ou]("focus", this.onFocus,  this)
                    [ou]("blur", this.onBlur,  this)
                    [ou]("keydown", this.onFocusKeyDown,  this);
    },
    processMouseOverOut : function(ou){
        this.wrap[ou]("mouseover", this.onMouseOver, this)
                 [ou]("mouseout", this.onMouseOut, this);
    },
    /**
     * 设置组件是否可见
     * @param {Boolean} v 是否可见
     */
    setVisible: function(v){
        if(v==true)
//            this.wrap.show();
            this.wrap.setStyle('display','');
        else
//            this.wrap.hide();
            this.wrap.setStyle('display','none');
    },
    /**
     * 设置组件宽度
     * @param {Number} w 宽度,单位px
     */
    setWidth: function(w){
        this.width = w;
        this.wrap.setWidth(w);
    },
    /**
     * 设置组件高度
     * @param {Number} h 高度,单位px
     */
    setHeight: function(h){
        this.height = h;
        this.wrap.setHeight(h);
    },
    /**
     * 组件获取焦点
     */
    focus : function(){
        if(this.isFocused) return;
        this.focusEl.focus();
    },
    /**
     * 组件失去焦点
     */
    blur : function(){
        if(!this.isFocused) return;
        this.focusEl.blur();
    },
    /**
     * 移动组件到指定位置
     * @param {Number} x X坐标
     * @param {Number} y Y坐标
     */
    move: function(x,y){
        this.wrap.setX(x);
        this.wrap.setY(y);
    },
    windowResizeListener : function(){
        var w,h;
        if(!Ext.isEmpty(this.marginWidth)){
            var wd = Spark.getViewportWidth();
            w = wd-this.marginWidth;
            this.setWidth(w);
        }
        if(!Ext.isEmpty(this.marginHeight)){
            var ht = Spark.getViewportHeight();
            h = ht-this.marginHeight; 
            this.setHeight(h);
        }
    },
    isEventFromComponent:function(el){
        return this.wrap.contains(el)
    },
    destroy : function(){
        $S.ViewComponent.superclass.destroy.call(this);
        delete this.wrap;
    },
    onFocusKeyDown : function(e){},
    onFocus : function(e){
        if(!this.isFocused){
            this.isFocused = true;            
            this.fireEvent("focus", this);
        }
    },
    onBlur : function(e){
        if(this.isFocused){
            this.isFocused = false;            
            this.fireEvent("blur", this);
        }
    },
    onMouseOver : function(e){
        this.fireEvent('mouseover', this, e);
    },
    onMouseOut : function(e){
        this.fireEvent('mouseout', this, e);
    }
})